<template>
  <div class="vux-timeline">
    <ul>
      <slot></slot>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'timeline',
    props: {
      color: String,
      currentIndex: {type: Number, default: 0},
      isStop: false,
      isShowIcon: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      setChildProps () {
        if (!this.$children) return
        const len = this.$children.length
        this.$children.forEach((child, index) => {
          child.isLast = index === len - 1
          child.isFirst = index === 0
          child.index = index
        })
      }
    }
  }
</script>

<style lang="less">
  @import '../../../node_modules/vux/src/styles/variable.less';

  .vux-timeline {
    padding: 1rem;
  }

  .vux-timeline > ul > li {
    list-style: none;
  }

  @vux-timeline: ~"vux-timeline";

  .@{vux-timeline} {
    &-item {
      position: relative;
    }

    &-item-content {
      padding: 0 0 .75rem .1rem;
      margin: 0 0 .75rem 1.1rem;
      border-bottom: 1px solid #e6e6e6;
    }

    &-item-head, &-item-head-first {
      position: absolute;
      content: '';
      z-index: 99;
      border-radius: 99px;
    }

    &-item-head {
      width: 10px;
      height: 10px;
      left: 1px;
      top: 4px;
    }

    &-item-head-first {
      width: 20px;
      height: 20px;
      left: -4px;
      top: 5px;
    }

    &-item-tail {
      position: absolute;
      content: '';
      height: 120%;
      width: 1px;
      left: 6px;
      top: 5px;
      background-color: #e1e1e1;
    }

    &-item-checked {
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;

      &.weui-icon-success-no-circle::before, &.weui-icon-waiting::before {
        font-size: 14px;
        position: absolute;
        left: 3px;
        top: 3px;
        margin: 0 !important;
        color: #FFF;
      }
      &.weui-icon-waiting::before {
        color: #ce292d;
        font-size: 20px;
        left: -4px;
        top: 0;
        z-index: 2;
      }
    }
  }

  .vux-timeline-item-color {
    background-color: @timeline-item-bg-color;
  }

  .vux-timeline-item-no {
    background-color: transparent;
  }
</style>
